<template>
  <el-upload
    v-if="!isDisabledUpload"
    ref="upload"
    class="upload-demo"
    style="display: inline-block; margin-right: 10px"
    :action="actionUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :before-upload="beforeUpload"
    :data="{ access_token: userInfo.access_token, path: 'scm/maindata' }"
    multiple
    :auto-upload="true"
    :on-progress="handleProgress"
    :on-exceed="handleExceed"
    :on-success="handleSuccess"
    :on-change="uploadChange"
  >
    <el-button
      size="small"
      type="primary"
      class="vxe-btn-save"
      ref="btn"
      :disabled="isDisabledUpload"
      >{{ text }}</el-button
    >
  </el-upload>
</template>

<script>
  import baseUrl from '@/common/config';
  import API from '@/api/dataBase';
  import path from 'path';
  export default {
    name: 'IELUploadBtn',
    props: {
      isDisabledUpload: {
        type: Boolean,
        default: false,
      },
      // 上传的回调方法
      uploadHandler: {
        type: Function,
      },
      text: {
        type: String,
        default: '上传',
      },
      // 文件大小单位M
      fileSize: {
        type: Number,
        default: 0,
      },
      // 支持的文件格式['png','gif','jpeg','jpg']
      fileType: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        actionUrl: '',
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file, '文件');
      },
      beforeUpload(file) {
        console.log('文件', file);
        const { name, size } = file;
        // 文件格式化校验
        if (this.fileType.length) {
          const supportFileType = this.fileType?.join('|');
          const fileExtname = path.extname(name).substring(1);
          console.log(supportFileType, fileExtname);
          if (!new RegExp('(' + supportFileType + ')', 'i').test(fileExtname)) {
            this.$message.warning(`文件格式不正确,只能上传${this.fileType}其中一种`);
            return false;
          }
        }
        if (this.fileSize > 0) {
          // 文件大小
          if (size > this.fileSize * 1024 * 1024) {
            this.$message.warning(`文件过大,请上传小于${this.fileSize}MB的文件`);
            return false;
          }
        }
        return true;
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      beforeRemove(file) {
        console.log(file);
        // return this.$confirm(`确定移除 ${file.name}？`);
      },
      // 上传时
      handleProgress(event, file, fileList) {
        console.log(event, file, fileList, '文件上传时');
        this.loading.startLoading('正在上传中....');
      },
      //上传成功
      handleSuccess(res, file) {
        this.loading.endLoading();
        if (res.code === 0) {
          let obj = {
            attachmentName: file.name,
            createBy: this.userInfo.userName,
            gmtCreate: this.todayDate,
            attachmentPath: res.data.attachmentPath,
            attachmentKey: res.data.attachmentKey,
          };
          this.$emit('upload', obj);
          this.uploadHandler && this.uploadHandler(obj);
          this.$message.success('上传成功');
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error',
          });
        }
      },
      uploadChange(_, fileList) {
        this.viewFileList = fileList;
      },
    },
    mounted() {
      this.actionUrl = baseUrl + API.OSS_UPLOAD_API;
    },
  };
</script>

<style lang="scss" scoped>
  .upload-demo {
    display: inline-block;
    ::v-deep .el-upload-list {
      display: none !important;
    }
  }
</style>
